<template>
    <div class="effect">
        <div class="base">基础模版</div>
        <div class="base variables banner">变量</div>
        <div class="base extend">扩展</div>
        <div class="base mixins">混合</div>
        <div class="base params-mixins">含参混合</div>
        <div class="base func-mixins">混合“函数”</div>
        <div class="base rulesets-mixins">规则集混合</div>
        <div class="base condition-mixins">条件混合</div>
        <div class="base loop-mixins">循环</div>
        <div class="base">...</div>
    </div>
</template>

<script>
export default {
    
}
</script>

<style lang="less" scoped>
.effect{
    text-align: left;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    padding-bottom: 10px;
}
.base{
    width: calc(20% - 8px);
    font-size: 18px;
    height: 60px;
    border-radius: 5px;
    line-height: 60px;
    text-align: center;
    color: rgb(95, 95, 95);
    background: rgb(219, 219, 219);
    border: 1px solid rgb(170, 170, 170);
    box-sizing: border-box;
    margin: 4px;
    box-shadow: 3px 3px 3px #ccc;
}
@import url('./effect.less');
</style>